<template>
  <div class="boxsty zhiBiao">
<!--    <div class="flex justifyContentSpaceBetween">-->
<!--      <div class="tabletext">指标项列表</div>-->
<!--    </div>-->
  <div  :height="searchheight" v-if="showSearch" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "收起" : "展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced"  v-if="tianBaoTable.lastPage=='zbnd'">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  class="form-inline" v-if="showSearch">
              <el-form-item label="">
                <el-checkbox-group v-model="dataForm.check">
                  <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
           </div>
    </div>
    <div style="float: right">
      <el-button type="primary" plain @click="saveZhibiaoData" v-if="editFlag == 1">保存</el-button>
      <el-button type="primary" plain @click="fnBackOldPage">关闭</el-button>
      <el-button type="primary" plain @click="okAll" v-if="editFlag == 0"  v-loading.fullscreen.lock="fullscreenLoading">批量审核</el-button>
    </div>
    <div class="avue-crud">
      <el-table
        ref="zhibiaotable"
        style="width: 100%;margin-top:20px"
        :data="dataList"
        border
        v-loading="dataListLoading">
        <el-table-column
         v-if="tianBaoTable.lastPage=='zbnd'"
          label="选择"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="index" width="60" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column
          v-if="radio =='1'"
          prop="name"
          header-align="center"
          align="center"
          min-width="100"
          label="受约人姓名">
          <template slot="header" slot-scope="scope">
            <span>受约人姓名</span><span class="mg-l10">({{dataList.length}}人)</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="radio =='2'"
          prop="name"
          header-align="center"
          align="center"
          min-width="100"
          label="机构名称">
          <template slot="header" slot-scope="scope">
            <span>机构名称</span><span class="mg-l10">({{dataList.length}}个)</span>
          </template>
        </el-table-column>
        <el-table-column  v-for="(item,index) in list" :key="index" align="center" :label="item.name">
          <template slot="header" slot-scope="scope">
            <span>{{ item.name }}</span><span class="mg-l10">({{dataList|filterNum(item,index)}}个)</span>
          </template>
          <el-table-column v-if="false"
            header-align="center"
            align="center"
            min-width="100"
            label="合同指标表id">
            <template slot-scope="scope">
              <el-input v-model="scope.row['zbId'+(index+1)]" placeholder="合同指标表id"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="250"
            label="目标值">
            <template slot-scope="scope">
               <el-input v-if="tianBaoTable.lastPage == 'zbnd'" :rows="1" type="textarea" v-model="scope.row['targetValue'+(index+1)]" :disabled="!scope.row['zbId'+(index+1)]" placeholder="目标值" @change="fnChangeMuB(scope.row['targetValue'+(index+1)],'targetValue'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
               <span v-else>{{scope.row['targetValue'+(index+1)]}}</span>
            </template>
          </el-table-column>
           <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="权重">
            <template slot-scope="scope">
               <el-input v-if="tianBaoTable.lastPage == 'zbnd'"  v-model="scope.row['weight'+(index+1)]" :disabled="!scope.row['zbId'+(index+1)]" placeholder="权重" @change="fnChangeMuB(scope.row['weight'+(index+1)],'weight'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
               <span v-else>{{scope.row['weight'+(index+1)]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            min-width="100"
            align="center"
            label="单位">
            <template slot-scope="scope">
              <el-input v-if="tianBaoTable.lastPage == 'zbnd'" v-model="scope.row['unit'+(index+1)]" placeholder="单位" :disabled="!scope.row['zbId'+(index+1)]"  @change="fnChangeMuB(scope.row['unit'+(index+1)],'unit'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
              <span v-else>{{scope.row['unit'+(index+1)]}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="完成值">
            <template slot-scope="scope">
              <el-input :disabled="!scope.row['zbId'+(index+1)]" v-model="scope.row['completeValue'+(index+1)]" placeholder="完成值"  @change="fnChangeMuB(scope.row['unit'+(index+1)],'unit'+(index+1),scope.$index,'zbId'+(index+1))"></el-input>
            </template>
          </el-table-column> -->
          <el-table-column
            header-align="center"
            align="center"
            min-width="120"
            :prop="'increaseDecrease'+(index+1)"
            label="上年度完成值">
          </el-table-column>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
import {fetchList, delObj,updateBatchZhiBiaoState} from '@/api/hetongrenwu/hetonghtxxdjb'
import {mapGetters} from 'vuex'
import {getZhibiaoCheckndData,getZhibiaoCheckndDataHtsh,getZhibiaoData,saveZhibiaoData} from '@/api/hetongrenwu/hetongyeji/hetongzb'
import {okAllApish, confirmStatus} from '@/api/hetongrenwu/hetongyeji/hetongnd'
import { tbshokAllByContract} from '@/api/hetongrenwu/hetongyeji/hetongzb'
export default {
  props:{
    tianBaoTable:{},
    ids:[],
    lastPage:"",
    hetongzhibiaoTable:{},
    dataListHT:[],
    radio:"",
    ndids:[],
  },
  data() {
    return {
      editFlag: 1,
      pageTitle:'业绩合同',
      dataForm: {
        check: []
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      fullscreenLoading:false,
      zhiShow:'1',
      zhibiaoForm:{

      },
      showSearch:true,
      showBackBtn:true,
      checkList:[],
      idArray:'',
      searchadvanced: true,
      searchheight: '0',
      list:[],
    }
  },
  watch:{
    "dataForm.check"(newValue,oldValue){
      if(newValue.length>0){
        this.idArray = ''
        newValue.forEach(ele=>{
            this.idArray = this.idArray + ele+',';
        })
        this.list = this.checkList.filter(x=>{
          return newValue.some(y=>{
            return x.id==y;
          })
        })
        this.getDataList();
      }
      if(newValue.length == 0){
        this.list = [];
        this.dataList = [];
       //console.log(oldValue)
      }
    }
  },
  filters:{
    filterNum(dataList,listItem,index){
      var num=0;
      var arr=dataList.filter(item=>{
        return item['zbId'+(index+1)]
      })
      num=arr.length
      return num
    }
  },
  created() {
   //console.log(this.ids,this.ndids,this.tianBaoTable.lastPage);
   //console.log(this.ndids+"======ndids");
    var param={
      ids:this.ids,
      ndIds:this.ndids,
    }
    var params  = {
       ids:this.ids,
    }
    if(this.tianBaoTable.lastPage=='htsh' ||this.tianBaoTable.lastPage=='wbsh'){
         this.getZhibiaoCheckndDataHtsh(params);
    }else{
         this.getZhibiaoCheckndData(param);
    }

    //this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    saveZhibiaoData(){
      saveZhibiaoData(this.dataList).then(response => {
        this.$message.closeAll();
        this.$message.success('保存成功');
        this.getDataList()
      })
    },
    getZhibiaoCheckndDataHtsh(ids){
      getZhibiaoCheckndDataHtsh(ids).then(response => {
        this.checkList=response.data.data;
        var arr = response.data.data;
        this.list=[];
        arr.forEach(item=>{
          var obj=this.list.find(listItem=>listItem.id==item.id);
          if(!obj){
            this.list.push(item)
          }
        })
        this.ndids=[];
        new Promise((resolve, reject) => {
           response.data.data.forEach(ele=>{
              this.idArray = this.idArray + ele.id+',';
              this.ndids.push(ele.ndIds)
            })
            resolve(this.getDataList())
          })
      })
    },
     getZhibiaoCheckndData(ids){
      getZhibiaoCheckndData(ids).then(response => {
        this.checkList=response.data.data;
        if(this.tianBaoTable.lastPage!='zbnd'){
          //this.list = this.checkList;
//上面这种会出现重复的情况，所以用id去取了值（去重）
          var arr = response.data.data;
          this.list=[];
          arr.forEach(item=>{
            var obj=this.list.find(listItem=>listItem.id==item.id);
            if(!obj){
              this.list.push(item)
            }
          })

          new Promise((resolve, reject) => {
           response.data.data.forEach(ele=>{
            //console.log(ele)
              this.idArray = this.idArray + ele.id+',';
            })
            resolve(this.getDataList())
          })
        }else{
          // response.data.data.forEach(ele=>{
          //   //console.log(ele)
          //     this.idArray = this.idArray + ele.id+',';
          // })
          this.list = [];
        }
      })
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    //复选框选中数据时批量更改目标值
    fnChangeMuB(val,prop,index,isEdit){
     //console.log(val,prop,index,isEdit)
      //zhibiaotable
      var selectedData=this.$refs.zhibiaotable.selection;
     //console.log(selectedData)
      if(selectedData.length>0){
        selectedData.forEach(item=>{
          if(item[isEdit]){
            item[prop]=val;
          }
        })
      
      }
      this.saveZhibiaoData()
    },
    init(data) {
      this.lastPage = data.lastPage;
      this.showSearch = data.showSearch;
      this.pageTitle=data.pageTitle;
      this.showBackBtn=data.showBackBtn;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      var params={
        zhibiaoId: this.idArray,
        str:1,
        ids:this.ids,
        typestr:this.tianBaoTable.lastPage,
        ndIds:this.ndids,
      }
      getZhibiaoData(params).then(response => {
        this.dataList=response.data.data;
        this.dataListLoading = false;
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll();
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //子集信息
    zhibiaoChild(zhibiaoChild){
      if(zhibiaoChild){
        this.zhiShow=1
      }
    },
    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data){
      this.addOrUpdateVisible = false;
      this.zhiShow=2;
      this.zhibiaoForm={
        enter:0,
        disabled:false
      }
    },
    //返回原来的页面
    fnBackOldPage(){
      this.$emit('fnBackOldPage','返回原页面')
    },
    editLock(){
      this.editFlag = 0
    },
    okAll(){
      this.fullscreenLoading = true;
      var params = {
        rows:this.dataList,
        type:this.tianBaoTable.lastPage,
        taskIds:this.tianBaoTable.taskIds,
        ndIds:this.tianBaoTable.ndIds
      }
      updateBatchZhiBiaoState(params).then((res)=>{
        this.$message.closeAll();
        this.$message.success("提交成功");
         this.fullscreenLoading = false;
        this.fnBackOldPage()
      })
    }
  }
}
</script>
